<template>
  <div class="global-container">
    <div class="search">
      <el-form ref="form" :model="searchData" inline>
        <el-form-item label="事项名称" prop="bussType">
          <Aselect v-model="searchData.bussType" :options="bussTypeOptions" />
        </el-form-item>
        <el-form-item label="申请人" prop="appPer">
          <el-input v-model="searchData.appPer"></el-input>
        </el-form-item>
        <el-form-item label="申请时间" prop="time">
          <AdatePicker v-model="searchData.time" type="daterange"></AdatePicker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="search">查询</el-button>
          <el-button type="primary" size="mini" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="alert">
      <template v-if="userType.includes('5') || userType.includes('8')">
        <el-alert
          title="请在提交申请后3个工作日内对申请做出处理！"
          type="error"
          :closable="false"
        />
      </template>
      <template v-else>
        <el-alert
          title="请在提交申请后1个工作日内对(质量检测单位-常规审批制)做出处理，3个工作日内对(质量检测单位-告知承诺制)做出处理!"
          type="error"
          :closable="false"
        />
      </template>
    </div>
    <Atable :tableData="tableData" :tableModel="tableModel">
      <template #sqTime="{ row }">
        <span
          v-if="row.bussType == 5"
          :class="$dayjs().diff($dayjs(row.sqTime), 'day') >= 1 ? 'red' : ''"
          >{{ $dayjs(row.sqTime).format('YYYY-MM-DD') }}</span
        >
        <span
          v-else
          :class="$dayjs().diff($dayjs(row.sqTime), 'day') >= 3 ? 'red' : ''"
          >{{ $dayjs(row.sqTime).format('YYYY-MM-DD') }}</span
        >
      </template>
      <template #actions="{ row }">
        <el-button @click="handle(row)" type="primary" size="small"
          >处理</el-button
        >
      </template>
    </Atable>
    <PageSize
      ref="pageSize"
      :total="searchData.total"
      :pageNum="searchData.pageNo"
      :pageSize="searchData.pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script>
import Aselect from '@/components/Select/Aselect';
import Atable from '@/components/Table/Atable';
import PageSize from '@/components/PageSize/PageSize';
import AdatePicker from '@/components/TimePicker/AdatePicker';
import businessApi from '@/api/business';
import apply from '@/assets/js/apply';
export default {
  components: { Atable, Aselect, PageSize, AdatePicker },
  data() {
    return {
      searchData: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
      },
      tableData: [],
      tableModel: [
        {
          prop: 'code',
          label: '事项编号',
          render: (row) => apply.applyCode[row.bussType],
        },
        {
          prop: 'name',
          label: '事项名称',
          width: '350px',
          render: (row) => apply.applyName[row.bussType],
        },
        {
          prop: 'appPer',
          label: '申请人',
          render: (row) => row.appPer || row.appUnit,
        },
        {
          prop: 'sqTime',
          label: '申请时间',
          slot: 'sqTime',
        },
        {
          prop: 'actions',
          label: '操作',
          slot: 'actions',
        },
      ],
    };
  },
  computed: {
    userType() {
      return this.$store.state.user.userInfo.userType;
    },
    // 事项类别
    bussTypeOptions() {
      return apply.bussTypeOptions;
    },
  },
  mounted() {
    this.getTable();
  },
  methods: {
    // 获取表格数据
    async getTable() {
      let params = {
        ...this.searchData,
        bussType:
          this.searchData.bussType || businessApi.getUserBussType(this.userType),
        appStartTime: this.searchData.time?.[0] ?? null,
        appEndTime: this.searchData.time?.[1] ?? null,
        status: 1,
      };
      const { records, total } = await businessApi.getStepsList(params);
      this.tableData = records || [];
      this.searchData.total = total;
    },
    // 查询
    search() {
      this.searchData.pageNo = 1;
      this.getTable();
    },

    handleSizeChange(val) {
      this.searchData.pageSize = val;
      this.getTable();
    },
    handleCurrentChange(val) {
      this.searchData.pageNo = val;
      this.getTable();
    },
    // 重置
    reset() {
      this.searchData = {
        pageNo: 1,
        pageSize: 10,
        total: 0,
      };
      this.getTable();
    },
    // 处理
    handle(row) {
      this.$router.push({
        path: '/processMain',
        query: {
          type: 'accept',
          id: row.id,
          bussType: row.bussType,
          userId: row.userId,
          // 新渝快办
          serviceType: row.serviceType,
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.alert {
  margin-bottom: 10px;
  display: flex;

  .el-alert {
    width: auto;
  }
}
.red {
  color: red;
}
</style>
